CSS Selectors MasterClass

What Are Selectors In CSS?

Selectors Are The HTML Elements Which We Use In CSS To Select That Particular Element In CSS And Style It And Remember It Can Be An ID You Give To An Element Or It Can Be A Class Or Element Itself, The Drawback Is That If You Select An Element Like Div And Change Its Background Color So All The Divs In HTML Will Change Their Background Color. If You Want To Style Or Color Just One Particular Div Or Any Element In Single You Must Provide It A Class Or An ID And Then Select That ID Or Class As A Selector And Style It.

I'm Using Internal CSS In This Class And Below Is An Example Of Div With Background Color BlueViolet And Color Property As Value AliceBlue.

Element Selector (Type Selector)

Hey I'm A Div.

Hey I'm Another Div With Same Properties And Values Because Me The Div Element Is Selected As The Selector In Internal CSS.

Class Selector

Hey I'm Here Again The Div But This Time I Have Been Selected As A Class Selector With Background Color AquaMarine And Color Black.

ID Selector

Hey I'm Here Again The Div But This Time I Have Been Selected As An ID Selector With Background Color AntiqueWhite And Color Black.

Child Selector

Hey I'm A Div And I Have Been Selected As Element Selector But This Time I Have To Show You That I Have A Child Paragraph And I Selected It As A Child div > p So The Style I Gave Applies To Each Paragraph Tag In Div Element.

Hey I'm Divs Child A Paragraph Tag.I Will Only Get Styled If I'm A Direct Child Of Div Else I Should Be Used As A Descendent Selector.

Descendent Selector

Hey I'm A Span And P Tag Is Not A Direct Child Of Mine Instead It Is My Grandchild So Here Comes The Descendent Selector Which Is To Use span Then Space Then p Tag Now Whether p Tag Is A Direct Child Or Grandchild Or GreatGrandChild Its Styles Will Surely Change.

Hey I'm A Paragraph And I'm Grandchild Of Span.

Universal Selector

Universal Selector Is * That Selects All The Elements In HTML And Changes Their Style In This Example I Have Given All The Elements Margin And Padding Of 10.

Pseudo Selector

These Are Types Of Links You Can Change Their Styles If They Are Visited Or Active Or Not Visited (Link) Or When You Hover On Them

Head Towards Google Head Towards Facebook 2 Hahahaha